<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星辰诞愿 - 生日快乐</title>
    <style>
        /* Birthday Theme Styles */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            min-height: 100vh;
        }
        .nav {
            display: flex;
            align-items: center;
            padding: 15px 30px;
            background: rgba(255,255,255,0.9);
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            border-bottom: 3px solid #ff6b88;
        }
        .nav img {
            height: 50px;
            margin-right: 15px;
        }
        .blog-title {
            font-size: 24px;
            font-weight: bold;
            color: #d23369;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        .space {
            flex-grow: 1;
        }
        .container-login {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding-top: 80px;
            box-sizing: border-box;
        }
        .login-dialog {
            background-color: rgba(255,255,255,0.95);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(210, 51, 105, 0.2);
            width: 380px;
            border: 2px dashed #ff6b88;
            position: relative;
        }
        .login-dialog:before {
            content: "🎂";
            position: absolute;
            font-size: 30px;
            top: -15px;
            left: -15px;
        }
        .login-dialog:after {
            content: "🎉";
            position: absolute;
            font-size: 30px;
            bottom: -15px;
            right: -15px;
        }
        .login-dialog h3 {
            text-align: center;
            margin-bottom: 25px;
            color: #d23369;
            font-size: 28px;
            font-weight: bold;
        }
        .row {
            margin-bottom: 20px;
        }
        .row span {
            display: block;
            margin-bottom: 8px;
            color: #d23369;
            font-weight: bold;
        }
        .row input {
            width: 100%;
            padding: 12px;
            border: 2px solid #ffb8c6;
            border-radius: 8px;
            box-sizing: border-box;
            font-family: inherit;
            background-color: #fff9fa;
        }
        .row input:focus {
            outline: none;
            border-color: #d23369;
        }
        button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(to right, #ff6b88, #ff8e53);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            font-family: inherit;
            margin-top: 10px;
            box-shadow: 0 4px 8px rgba(210, 51, 105, 0.2);
        }
        button:hover {
            background: linear-gradient(to right, #ff8e53, #ff6b88);
        }
        #register {
            background: linear-gradient(to right, #a18cd1, #fbc2eb);
        }
        #register:hover {
            background: linear-gradient(to right, #fbc2eb, #a18cd1);
        }
        .captcha-container {
            display: flex;
            align-items: center;
            margin-top: 15px;
        }
        .captcha-input {
            flex: 1;
            padding: 12px;
            border: 2px solid #ffb8c6;
            border-radius: 8px 0 0 8px;
            background-color: #fff9fa;
        }
        .captcha-img {
            height: 44px;
            width: 100px; /* 固定宽度 */
            border-radius: 0 8px 8px 0;
            border: 2px solid #ffb8c6;
            border-left: none;
            cursor: pointer;
            background-color: transparent;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="nav">
        <img src="pic/cat.jpg" alt="小猫">
        <span class="blog-title">星辰诞愿 · 生日快乐</span>
        <div class="space"></div>
    </div>
    <div class="container-login">
        <div class="login-dialog">
            <h3>生日登陆</h3>
            <div class="row">
                <span>用户名</span>
                <label for="userName"></label><input type="text" name="userName" id="userName" placeholder="输入你的名字">
            </div>
            <div class="row">
                <span>密码</span>
                <label for="password"></label><input type="password" name="password" id="password" placeholder="输入你的密码">
            </div>
            <div class="row">
                <span>验证码(不区分大小写)</span>
                <div class="captcha-container">
                    <label for="inputCaptcha"></label><input type="text" id="inputCaptcha" class="captcha-input" placeholder="输入验证码">
                    <img id="verificationCodeImg" src="/captcha/get" class="captcha-img" title="看不清？换一张" alt="验证码">
                </div>
            </div>
            <div class="row">
                <button id="submit" onclick="login()">
                    登录 🎈
                </button>
            </div>
            <div class="row">
                <button id="register" onclick="register()">
                    注册 🎁
                </button>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        //刷新验证码
        $("#verificationCodeImg").click(function(){
            //new Date().getTime()).fadeIn()防止前端缓存
            $(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();
        });
        function login() {
            $.ajax({
                type:"post",
                url:"/user/login",
                data:{
                    userName:$("#userName").val(),
                    password:$("#password").val(),
                    input:$("#inputCaptcha").val()
                },
                success:function (result){
                    if (result.code === "SUCCESS" && result.data != null){
                        //前端保存token
                        localStorage.setItem("user_token",result.data);
                        //跳转
                        location.href = "home.html";
                    }else {
                        alert(result.errorMessage);
                    }
                },error:function (error){
                    if (error != null && error.status === 401){
                        location.href = "login.html";
                    }
                }
            })
        }
        function register(){
            location.href = "register.html";
        }
    </script>
</body>
</html>